
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Catch Gold</title>
	<script src="//cdn.bootcss.com/crafty/0.8.0/crafty.js"></script>
</head>
<body>
<div id="game"></div>
<pre>
	← → Move	F5 Restart
</pre>
<script>
    Crafty.init(800, 600, document.getElementById('game'));
    Crafty.load({
            // "images": ["bg.jpg", "s.png", "m.png", "z.png", "hp.png"]
            "images": ["static/bg.jpg", "static/s.png", "static/m.png", "static/z.png",
                "static/hp.png"]
        },	//load img
        function () {
            Crafty("Loading").each(function () {
                this.y = -250;
            });
            Crafty.background('url(static/bg.jpg)');

            //Snake
            Crafty.e("Snake, 2D, DOM, Image, Multiway")
                .image('static/s.png')
                .attr({x: 345, y: 494, w: 107, h: 106})
                .multiway(250, {LEFT_ARROW: 180, RIGHT_ARROW: 0});

            //Bullion
            function Bullion() {
                Crafty.e("2D, DOM, Image, Collision")
                    .image('static/m.png')
                    .attr({x: 370, y: -53, w: 54, h: 53, dY: Crafty.math.randomInt(2, 8)})
                    .bind('EnterFrame', function () {
                        if (this.y > 600) {
                            this.y = -53;
                            this.x = Crafty.math.randomNumber(1, 700)
                        }
                        this.y += this.dY;
                    })
                    .onHit('Snake', function () {
                        this.y = 10;
                        this.x = Crafty.math.randomNumber(10, 790);
                        Crafty("LeftPoints").each(function () {
                            this.text(++this.points + " Gold")
                        });
                        Crafty("BigPoints").each(function () {
                            this.points2 = this.points2 + 1;
                            this.text("Your Catch " + this.points2 + " Gold!!!<br> F5 Restart")
                        });
                    })
            }

            function BullionNum(num) {
                for (var i = 0; i < num; i++) {
                    Bullion();
                }
            }

            BullionNum(8);	//set Bullion Number


            //Bomb
            Crafty.e("2D, DOM, Image, Collision")
                .image('static/z.png')
                .attr({x: 370, y: -53, w: 54, h: 66, dY: Crafty.math.randomInt(2, 10)})
                .bind('EnterFrame', function () {
                    if (this.y > 600) {
                        this.y = -53;
                        this.x = Crafty.math.randomNumber(1, 700)
                    }
                    this.y += this.dY;
                })
                .onHit('Snake', function () {
                    Gover();
                });

            //Score boards
            Crafty.e("LeftPoints, DOM, 2D, Text")
                .attr({x: 20, y: 20, w: 100, h: 20, points: 0})
                .textFont({family: 'Verdana'})
                .textColor('#FFE983')
                .text("0 Gold");

            //Clock boards
            Crafty.e("Clock, DOM, 2D, Text")
                .attr({x: 760, y: 20, w: 20, h: 20})
                .textFont({family: 'Verdana'})
                .textColor('#FFE983')
                .text('0');

            function nums(f) {
                Crafty("Clock").each(function () {
                    this.text(f);
                });
            }

            function _nums(f) {
                return function () {
                    nums(f);
                }
            }

            function Clocks(num) {
                for (var i = num; i >= 0; i--) {
                    var tims = (num - i) * 1000;
                    setTimeout(_nums(i), tims);
                }
            }

            Clocks(30);	//set clock show
            setTimeout(Gover, 30100);	//set clock

            //Game Over
            Crafty.e("BigPointsBG, 2D, DOM, Image, Collision")
                .image('static/hp.png')
                .attr({x: 270, y: -250, w: 279, h: 86});
            Crafty.e("BigPoints, DOM, 2D, Text")
                .attr({x: 300, y: -250, w: 220, h: 50, points2: 0})
                .textFont({size: '16px', family: 'Verdana'})
                .textColor('#FFE983')
                .textAlign('center')
                .text("Your Catch 0 Gold!!!<br> F5 Restart");

            function Gover() {
                Crafty("BigPointsBG").each(function () {
                    this.y = 40;
                });
                Crafty("BigPoints").each(function () {
                    this.y = 60;
                });
                setTimeout('Crafty.stop()', 100);
            }
        },
        function () {	//loading
            Crafty.e("Loading, DOM, 2D, Text")
                .attr({x: 300, y: 250, w: 200, h: 50})
                .textFont({size: '16px', family: 'Verdana'})
                .textColor('#000000')
                .textAlign('center')
	            .text("Loading...");
        }
    );
</script>
</body>
</html>
